<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <span class="iconfont icon-bilibili-copy"></span>
        <span class="iconfont icon-sousuo"></span>
        <img class="pic" src="./images/login.png" alt="">
        <img class="picc" src="./images/download.png" alt="">
    </header>
    <!-- tab类别 -->
     <div class="tab">
        <ul>
            <li class="first"><a href="#">首页</a></li>
            <li><a href="#">动画</a></li>
            <li><a href="#">番剧</a></li>
            <li><a href="#">国创</a></li>
            <li><a href="#">音乐</a></li>
            <li class="body"><a class="iconfont icon-xiangxia" href="#"></a></li>
        </ul>
     </div>
     <!-- 内容 -->
      <div class="nav">
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/2.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/2.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/2.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/2.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/2.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
        <div class="one">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/2.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon-bofang"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon-danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </a>
        </div>
      </div>
      <!-- 底部 -->
       <footer>
        <a href="#">
            <span class="iconfont icon-bilibili-copy"></span>
            <span>打开App,看感兴趣的视频</span>
        </a>
       </footer>
</body>
</html>